@extends('layouts.accordion')

@section('title', '手风琴式文章浏览 - ' . config('app.name'))

@push('styles')
<style>
    /* 额外的自定义样式 */
    .category-sidebar .accordion-button .badge {
        font-size: 0.7rem;
    }
    
    .article-item:first-child {
        border-top: none;
    }
    
    .article-content .article-body pre {
        background: var(--bg-accent);
        padding: 1rem;
        border-radius: 0.5rem;
        overflow-x: auto;
        font-size: 0.9rem;
        line-height: 1.4;
    }
    
    .article-content .article-body blockquote {
        border-left: 4px solid var(--primary-color);
        padding-left: 1rem;
        margin: 1.5rem 0;
        font-style: italic;
        color: var(--text-secondary);
    }
    
    .article-content .article-body ul,
    .article-content .article-body ol {
        padding-left: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .article-content .article-body li {
        margin-bottom: 0.5rem;
    }
    
    .article-content .article-body table {
        width: 100%;
        border-collapse: collapse;
        margin: 1.5rem 0;
    }
    
    .article-content .article-body th,
    .article-content .article-body td {
        border: 1px solid var(--border-color);
        padding: 0.75rem;
        text-align: left;
    }
    
    .article-content .article-body th {
        background: var(--bg-accent);
        font-weight: 600;
    }
</style>
@endpush

@push('scripts')
<script>
    // 额外的JavaScript功能
    document.addEventListener('DOMContentLoaded', function() {
        // 键盘快捷键支持
        document.addEventListener('keydown', function(e) {
            // ESC键关闭当前文章
            if (e.key === 'Escape') {
                const articleContent = document.getElementById('articleContent');
                articleContent.innerHTML = `
                    <div class="welcome-message">
                        <i class="bi bi-file-text"></i>
                        <h3>欢迎来到文章阅读区</h3>
                        <p>选择左侧分类和文章来开始阅读</p>
                    </div>
                `;
                
                // 移除文章列表中的活动状态
                document.querySelectorAll('.article-item.active').forEach(item => {
                    item.classList.remove('active');
                });
            }
        });
        
        // 平滑滚动到顶部
        function scrollToTop(element) {
            element.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        }
        
        // 为文章内容区域添加返回顶部功能
        const articleContent = document.getElementById('articleContent');
        let scrollTimeout;
        
        articleContent.addEventListener('scroll', function() {
            clearTimeout(scrollTimeout);
            scrollTimeout = setTimeout(function() {
                if (articleContent.scrollTop > 200) {
                    if (!document.getElementById('backToTop')) {
                        const backToTopBtn = document.createElement('button');
                        backToTopBtn.id = 'backToTop';
                        backToTopBtn.innerHTML = '<i class="bi bi-arrow-up"></i>';
                        backToTopBtn.className = 'btn btn-primary position-fixed';
                        backToTopBtn.style.cssText = `
                            bottom: 20px;
                            right: 20px;
                            z-index: 1000;
                            border-radius: 50%;
                            width: 50px;
                            height: 50px;
                            box-shadow: var(--shadow-lg);
                        `;
                        
                        backToTopBtn.addEventListener('click', function() {
                            scrollToTop(articleContent);
                        });
                        
                        document.body.appendChild(backToTopBtn);
                    }
                } else {
                    const backToTopBtn = document.getElementById('backToTop');
                    if (backToTopBtn) {
                        backToTopBtn.remove();
                    }
                }
            }, 100);
        });
        
        // 文章内容中的链接处理
        articleContent.addEventListener('click', function(e) {
            if (e.target.tagName === 'A' && e.target.href.startsWith('http')) {
                e.preventDefault();
                window.open(e.target.href, '_blank');
            }
        });
    });
</script>
@endpush